<template>
  <!-- 高维键 -->
  <div class="ca">
    <!-- 卡片区域 -->
    <el-card>
      <!-- 表单 -->
      <el-form ref="companysForm" :model="companysForm" label-width='auto' class="demo-form-inline">
        <el-row>
          <el-col :span="6">
            <el-form-item label="标签名称" prop="tags">
              <el-input v-model="companysForm.tags" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市" prop="province">
              <el-select class="inpWid" v-model="companysForm.province" placeholder="请选择" @focus="inputCity"
                @change="handleProvince">
                <el-option v-for="(item,index) in cityList.province" :key='index' :value="item"></el-option>
                <!-- <el-option label="区域二" value="beijing"></el-option> -->
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="地区" prop="city">
              <el-select class="inpWid" v-model="companysForm.city" placeholder="请选择">
                <el-option :value="item" v-for="(item,index) in cityList.cityDate" :key='index'></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称" prop="shortName">
              <el-input v-model="companysForm.shortName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态" prop="state">
              <el-select class="inpWid" v-model="companysForm.state" placeholder="请选择">
                <el-option label="启用" value='1'></el-option>
                <el-option label="禁用" value='0'></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item style="margin-left:-40px">
              <el-button size='small' @click="resetForm">清除</el-button>
              <el-button type="primary" size='small' @click="searchData">搜索</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-row type='flex' justify="end">
              <el-button icon="el-icon-edit" type="success" size='small' @click="addUser">新增用户</el-button>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
      <!-- 警告框 -->
      <template>
        <el-alert :title="'共'+counts+'条记录'" type="info" show-icon :closable="false">
        </el-alert>
      </template>
      <!-- 企业列表区域 -->
      <template>
        <el-table :data="companyList" style="width: 100%;margin-top:20px">
          <el-table-column prop="id" label="顺序" width="100" align="center">
          </el-table-column>
          <el-table-column prop="number" label="企业编号" align="center">
          </el-table-column>
          <el-table-column prop="shortName" label="企业简称" align="center">
          </el-table-column>
          <el-table-column prop="tags" label="标签">
          </el-table-column>
          <el-table-column prop="creatorID" label="创建者" align="center">
          </el-table-column>
          <el-table-column prop="addDate" label="创建日期" align="center">
          </el-table-column>
          <el-table-column prop="remarks" label="备注" align="center">
          </el-table-column>
          <el-table-column prop="state" label="状态" align="center">
            <template v-slot="{row}">
              {{row.state===0?'禁用':'启用'}}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180" align="center">
            <template v-slot="{row}">
              <!-- 修改参数按钮 -->
              <el-button type="primary" icon="el-icon-edit" circle plain @click="changeDate(row)"></el-button>
              <!-- 修改状态 -->
              <el-tooltip class="item" effect="dark" :content="row.state===1?'禁用':'启用'" placement="top">
                <el-button v-if="row.state===1" type="warning" icon="el-icon-close" circle plain
                  @click="changeState1(row)">
                </el-button>
                <el-button v-else type=" success" icon="el-icon-check" circle plain @click="changeState0(row)">
                </el-button>
              </el-tooltip>
              <!-- 删除按钮 -->
              <el-button type="danger" icon="el-icon-delete" circle plain @click="deleteDate(row)"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页功能 -->
        <el-pagination style="float:right;margin:10px 0" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" :current-page="companysForm.page" :page-sizes="[10, 20, 30,50]"
          :page-size="companysForm.pagesize" background :total="counts" layout=" prev, pager, next,sizes, jumper">
        </el-pagination>
      </template>
    </el-card>
    <!-- --- -->
    <Add ref="addRef" :formBase='companysList' @newDataes='change'></Add>
  </div>
</template>

<script>
import { provinces, citys } from '@/api/hmmm/citys.js'
// import { deepClone } from '@/utils/index.js'
import Add from '../components/companys-add.vue'
import { list, disabled, remove, detail } from '@/api/hmmm/companys.js'
export default {
  data () {
    return {
      // 获取公司列表的参数对象
      // queryInfo: {
      //   page: 1, // 当前页
      //   pagesize: 10, // 每页几条数据
      //   tags: '',
      //   province: '',
      //   city: '',
      //   shortName: ''
      // },
      counts: 0, // 共多少条数据
      companyList: [],
      companysList: {}, // 要修改的数据
      cityList: {
        province: [],
        cityDate: []
      },
      companysForm: {
        page: 1, // 当前页
        pagesize: 10, // 每页几条数据
        tags: '',
        province: '',
        city: '',
        shortName: '',
        state: null
      }
    }
  },

  created () {
    this.getCompanyList()
  },

  methods: {
    // 获取数据列表
    async getCompanyList (date) {
      try {
        const { data: res } = await list(date)
        console.log(res)
        this.counts = res.counts
        this.companyList = res.items
      } catch (error) {
        this.$message.error('请求数据失败')
      }
    },
    // 搜索
    searchData () {
      this.companysForm.page = 1
      this.getCompanyList(this.companysForm)
    },
    // 监听切换每页的条数
    handleSizeChange (newsize) {
      console.log(newsize)
      this.companysForm.pagesize = newsize
      this.getCompanyList(this.companysForm)
    },
    // 监听当前页改变
    handleCurrentChange (newpage) {
      console.log(newpage)
      this.companysForm.page = newpage
      this.getCompanyList(this.companysForm)
    },
    // 编辑数据
    async changeDate (row) {
      const { data } = await detail(row)
      this.companysList = data
      // console.log(row)
      this.$refs.addRef.dialogFormV()
    },
    // 打开添加用户对话框
    addUser () {
      this.companysList = {}
      this.$refs.addRef.dialogFormV()
    },
    // 修改用户数据
    change () {
      this.getCompanyList()
    },
    // 修改状态
    async changeState (sta) {
      const res = await disabled(sta)
      if (res.status !== 200) return this.$message.error('修改状态失败')
      console.log(res)
      this.$message.success('修改状态成功')
    },
    changeState1 (sta) {
      console.log(sta)
      this.$confirm('此操作将改为禁用状态, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '修改成功!'
        })
        sta.state = 0
        this.changeState(sta)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改'
        })
      })
    },
    changeState0 (sta) {
      console.log(sta)
      this.$confirm('此操作将改为启用状态, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '修改成功!'
        })
        sta.state = 1
        this.changeState(sta)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改'
        })
      })
    },
    // 删除数据
    async deleteDate (row) {
      await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        console.log(row)
        await remove(row)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
      // this.getCompanyList()
      this.handleCurrentChange()
    },
    // 获取省
    inputCity () {
      this.cityList.province = provinces()
    },
    // 选省获取到市
    handleProvince (e) {
      this.cityList.cityDate = citys(e)
      // console.log(this.cityList.cityDate)
      this.companysForm.city = this.cityList.cityDate[0]
    },
    // 清除输入框
    resetForm () {
      this.$refs.companysForm.resetFields()
    }
  },
  components: {
    Add
  }
}
</script>

<style scoped lang='less'>
.ca {
  margin: 25px 20px;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.inpWid {
  width: 100%;
}
</style>
